@import './variable.less';

.estate {
  .select-box {
    background-color: #f8f8f8;
    margin-top: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;

    .select-area {
      line-height: 40px;
      border-bottom: 1px dashed #ccc;

      .selection {
        width: calc(100% - 32px);
        position: relative;

        .select-tab {
          padding-left: 20px;
          padding-right: 150px;
          overflow: hidden;

          a {
            margin-right: 20px;
            font-size: 13px;
            cursor: pointer;

            &:hover {
              color: @theme;
            }

            &.active {
              color: @theme;
            }
          }

          >div {
            label.el-radio {
              margin-right: 10px;

              .el-radio__label {
                font-size: 13px;
              }
            }
          }

          i {
            color: #606266;
          }

          .el-select {
            margin-right: 20px;

            .el-input>input {
              height: 30px;
            }
          }

          .el-button {
            // height: 30px;
            // margin-top: 5px;
            // background-color: #fff;
            padding: 0px 20px;
            // color: #333;

            &.active {
              color: @theme;
            }

            >span {
              position: relative;
              line-height: 30px;

              img {
                position: absolute;
                width: 20px;
                height: 20px;
                right: -17px;
                top: -3px;
              }
            }
          }

          .selected-input {
            display: inline-block;
            font-size: 12px;
            margin-left: 10px;

            input {
              width: 40px;
              padding: 0 3px;
              height: 20px;
              line-height: 20px;
              border: 1px solid #ddd;
              outline: none;
              text-align: center;
            }

            .em {
              display: inline-block;
              margin: 0 3px;
              color: #333;
            }

            .price-btn {
              width: 45px;
              height: 20px;
              padding: 0 5px;
              margin-left: 5px;
              background-color: @theme;
              color: #fff;
              border: none;
            }
          }
        }

        .second-tabs {
          padding: 0 10px;
          line-height: 1.5;
          background-color: #fff;
          border: 1px solid #ddd;
          margin-bottom: 20px;

          a {
            margin-right: 20px;
            font-size: 13px;
            cursor: pointer;

            &:hover {
              color: @theme;
            }

            &.active {
              color: @theme;
            }

            &.disabled {
              pointer-events: none;
              font-weight: bold;
            }
          }
        }
      }
    }

    /deep/ .el-input__inner {
      height: 30px;
    }

    /deep/ .el-cascader .el-input .el-input__inner:focus,
    .el-cascader .el-input.is-focus .el-input__inner {
      border-color: @theme;
    }

    .el-radio__label:hover {
      color: @theme;
    }

    /deep/ .el-radio__input.is-checked+.el-radio__label {
      color: @theme;
    }

    /deep/ .el-radio__input.is-focus .el-radio__inner {
      border-color: @theme;
    }

    /deep/ .el-radio__input.is-checked .el-radio__inner,
    .el-radio__input.is-indeterminate .el-radio__inner {
      background-color: @theme;
      border-color: @theme;
    }

    .el-radio__inner:hover {
      border-color: @theme;
    }



    .addTab {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 12px;
      cursor: pointer;

      &:hover {
        color: @theme;
      }
    }


    .control {
      width: 100%;
      text-align: center;
      padding: 10px 0;

      // height: 37px;
      // line-height: 37px;
      span {
        font-size: 14px;
        cursor: pointer;

        &:hover {
          color: @theme;
        }
      }
    }

    .tags {
      border-top: 1px solid #ddd;
      padding-top: 10px;

      span {
        margin-right: 5px;
      }

      .el-tag {
        color: #606266;
        border-color: #ccc;
      }

      em.el-icon-delete {
        color: #000;
        cursor: pointer;

        &:hover {
          color: @theme;
        }
      }

      i {
        color: @theme;

        &:hover {
          background-color: @theme;
          color: #fff;
        }
      }

    }
  }

  .content {
    padding-bottom: 20px;
    border-top: 1px solid #ccc;

    .none-tip {
      img {
        width: 70px;
        height: 70px;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
      }

      text-align: center;
      padding: 30px;
      font-weight: 700;
    }

    ul>li {
      width: 380px;
      height: 500px;
      float: left;
      margin-right: 30px;
      margin-bottom: 30px;
      margin-top: 30px;
      border-radius: 3px;
      // border: 1px solid #ebebeb;
      box-shadow: 0px 0px 10px #ddd;
      cursor: pointer;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .cover {
        width: 380px;
        height: 285px;

        >img {
          border-radius: 3px 3px 0 0;
        }
      }

      .info {
        padding: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 325px);

        .name {
          font-weight: bold;
          font-size: 18px;
          color: #000000;
          margin-bottom: 20px;
        }

        .local {
          font-size: 16px;
          margin-bottom: 10px;
        }

        .deal {
          font-size: 14px;
          font-weight: bold;
          color: #4c4c4c;
          margin-bottom: 10px;
        }

        .line {
          height: 1px;
          width: 100%;
          background-color: #ebebeb;
          margin-bottom: 10px;
        }

        .tag1 {
          margin-right: 10px;
        }
      }
    }
  }

  .el-pagination{
    text-align: center;
    margin-bottom: 30px;
  }
}